<template>
  <div class="view-fill">
    <div class="app-container-flex">
      <NewFullScreen
        v-model="showDialog"
        title="省采供应商价目表详情"
        @returnBack="returnBack"
      >
        <div class="model-panel">
          <div class="model-panel-title">
            <p>{{ $t('basic_information') }}</p>
          </div>
          <div class="model-panel-body">
            <basic-information :info="infoList"> </basic-information>
          </div>
        </div>

        <div class="model-panel">
          <div class="model-panel-title">
            <Tooltip :text="$t('detailInfo')"></Tooltip>
          </div>
          <div class="model-panel-body">
            <div class="flex_full_item">
              <!-- 表格 -->
              <page-table
                v-model:data="tableInfo.data"
                :pager="false"
                :check-box="false"
                :tab-index="true"
                :field-list="tableInfo.fieldList"
                :isDynamic="true"
              >
                <template v-slot:col-price="scope">
                  <span v-if="scope.row.price || scope.row.price === 0">
                    {{ (scope.row.price || 0) + '元/' + scope.row.networkUnit }}
                  </span>
                  <span v-else>-</span>
                </template>
                <template v-slot:col-qty="scope">
                  {{ (scope.row.qty || 0) + scope.row.networkUnit }}
                </template>
              </page-table>
            </div>
          </div>
        </div>
      </NewFullScreen>
    </div>
  </div>
</template>

<script setup name="productSupplierDetail">
import {
  getProvinceProductSupplierInfoAll,
  getProvinceProductSupplierInfoBid,
} from '@/api/province'
const emits = defineEmits()
const { proxy } = getCurrentInstance()
const props = defineProps(['visible', 'id'])
const infoList = ref({
  data: {},
  fieldList: [
    {
      label: '通用名称',
      value: 'productName',
      type: 'text',
    },
    {
      label: '挂网产品类型',
      value: 'networkProductTypeValue',
      type: 'text',
    },
    {
      label: '商品代码',
      value: 'procurecatalogId',
      type: 'text',
    },
    {
      label: '产品ID',
      value: 'goodsId',
      type: 'text',
    },
    {
      label: '规格',
      value: 'outLookc',
      type: 'text',
    },
    {
      label: '型号',
      value: 'model',
      type: 'text',
    },
    {
      label: '品牌',
      value: 'brand',
      type: 'text',
    },
    {
      label: '包装规格',
      value: 'packOutlookc',
      type: 'text',
    },
    {
      label: '省采单位',
      value: 'networkUnit',
      type: 'text',
    },
    {
      label: '申报企业',
      value: 'companyNameTb',
      type: 'text',
    },
    {
      label: '配送企业名称',
      value: 'companyNamePs',
      type: 'text',
    },
    {
      label: '最后修改日期',
      value: 'lastUpdateTime',
      type: 'text',
    },
  ],
})
// 表格相关
const tableInfo = ref({
  fieldList: [
    {
      label: '采购价格',
      value: 'price',
      type: 'slot',
    },
    {
      label: '拉取时间',
      value: 'pullTime',
    },
  ],
  data: [],
})

const showDialog = computed({
  get() {
    return props.visible
  },
  set(newValue) {
    emits('update:visible', newValue) // 更新父组件shows
  },
})
onMounted(() => {
  getOrderInfo()
})

function getOrderInfo() {
  getProvinceProductSupplierInfoBid(props.id).then((resp) => {
    if (resp && resp.success) {
      infoList.value['data'] = resp.data
      getList()
    }
  })
}

function returnBack() {
  emits('returnBack', false)
}
function getList() {
  let params = {
    companyIdTb: infoList.value.data.companyIdTb,
    goodsId: infoList.value.data.goodsId,
    procurecatalogId: infoList.value.data.procurecatalogId,
  }
  getProvinceProductSupplierInfoAll(params).then((resp) => {
    if (resp && resp.success) {
      tableInfo.value.data = resp.data
    }
  })
}
</script>
<style scoped lang="scss">
:deep(.page-table) > .el-table {
  overflow-y: hidden;
}
.model-panel-title {
  display: flex;
  align-items: center;
  .model-tips {
    display: flex;
    align-items: center;
    margin-left: 10px;
    color: #909399;
    .model-tips-nearly,
    .model-tips-expire {
      display: block;
      margin-left: 5px;
      width: 17px;
      height: 17px;
    }
    .model-tips-nearly {
      background: #fceacb;
    }
    .model-tips-expire {
      background: #f5e4e4;
    }
  }
}
:deep(.el-table) {
  .nearly-row {
    background: #fceacb;
  }
  .expire-row {
    background: #f5e4e4;
  }
}
</style>
